<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery实现划入划出</title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<style>
		#ddd{
			background-color: #00FFFF;
			width: 240px;
		}
		</style>
	</head>
	<body>
	<div id="ddd">
		<div id="div1">
			四个意识
			<ul>
				<li>政治意识</li>
				<li>大局意识</li>
				<li>核心意识</li>
				<li>看齐意识</li>
			</ul>
		</div>
		<div id="div2">
			四个自信
			<ul>
				<li>道路自信</li>
				<li>理论自信</li>
				<li>文化自信</li>
				<li>制度自信</li>
			</ul>
		</div>
		<div id="div3">
			四个全面
			<ul>
				<li>全面监视现代社会主义国家</li>
				<li>全面深化改革</li>
				<li>全面从严治党</li>
				<li>全面依法治国</li>
			</ul>
		</div>
	</div>
		<script>
		$("ul").hide();
		$("#div1").mouseover(function(){
			$("ul").eq(0).show();
		}).mouseout(function(){
			$("ul").eq(0).hide();
		});
		
		$("#div2").mouseover(function(){
			$("ul").eq(1).show();
		}).mouseout(function(){
			$("ul").eq(1).hide();
		});
		
		$("#div3").mouseover(function(){
			$("ul").eq(2).show();
		}).mouseout(function(){
			$("ul").eq(2).hide();
		});
		</script>
		
	</body>
</html>
